<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<script type="text/javascript" src="${basePath}/resource/js/common/messages_${sessionScope.lang}.js"></script>
<div class="wrapper-popup hid" id="warpper-friends" title="好友列表">
    <header class="sub-header">
        <a class="fl" href="javascript:history.back();"><i class="iconfont">&#xe608;</i><spring:message code="back"/></a>
        <span><spring:message code="contacts"/></span>
        <a class="fr hid" name="complete" href="javascript:;"><spring:message code="done"/></a>
    </header>
    <form class="search-pos-pop"><a class="j_searchButton fr hid" href="javascript:;"><spring:message code="cancel"/></a>

        <div class="txt-pos-pop"><i class="iconfont clear fr hid">&#xe604;</i><i class="iconfont query fl">&#xe614;</i>

            <div class="input-box">
                <input class="search" type="text" placeholder="<spring:message code="search"/>">
            </div>
        </div>
    </form>
    <div class="list-pos-pop friends hid" id="friends-result"></div>
    <div class="list-pos-pop friends" id="friends-default"></div>
</div>
<script id="friend-tpl" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ var friend = d[i];}}
    {{# if (friend.tag) {}}
    <section class="layout-box line-around item-tag">
        {{friend.tag}}
    </section>
    {{# } else { }}
    <section class="layout-box line-around user-list" uid="{{friend.id}}">
        <div class="mod-avatar">
            <div class="avatar"><img src="{{friend.avatar}}" onerror="$(this).attr('src','http://123.57.249.184/i/defaultAvatar/moren_icon.png')" height="40" width="40">
            </div>
        </div>
        <div class="box-col item-list">
            <div><span>{{friend.name}}</span>

                <div class="select fr"><i class="iconfont select">&#xe603;</i><i class="iconfont selected hid">
                    &#xe602;</i></div>
            </div>
        </div>
    </section>
    {{# } }}
    {{# } }}
</script>
<script>

    var _FRIENDS_KEY = "_USER_FRIENDS";

    var friends =
    <%=request.getAttribute("friends")%> ||
    Common.getJsonStorage(_FRIENDS_KEY);
    Common.storageJson(_FRIENDS_KEY, friends);

    laytpl(document.getElementById('friend-tpl').innerHTML).render(friends, function (html) {
        $('#friends-default').append(html);
    });

    //$('.search-pos-pop').innerHeight() 高度为： 44  write取不到高度,所以写死
    $('.list-pos-pop').height(document.documentElement.clientHeight - $('.sub-header').height() - 44);
</script>
